import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

// 可以用 * as xxx 的语法, 将一个文件导出的所有变量形成一个对象
// 以下是如果导出大量的指令时, 可以一次遍历所有指令全部进行注册的方法
// import * as directives from '@/directives'
// // 可以遍历这个对象, 逐个逐个注册自定义指令即可
// const keys = Object.keys(directives)
// keys.forEach(key => {
//   console.log(key)
//   console.log(directives[key])
//   // 可以用 Vue.directive(名称, 配置对象) 方式来注册所有自定义指令
//   Vue.directive(key, directives[key])
// })
import { imageerror } from '@/directives'
Vue.directive('imageerror', imageerror)
// 自己封装全局组件：(这是放在一个文件夹里面)
import components from '@/components'
Vue.use(components)

// 引入vue的打印插件：
import Print from 'vue-print-nb'
Vue.use(Print)
// import PageTools from '@/components/PageTools/PageTools.vue'
// Vue.component('PageTools', PageTools)     //这是不需要 一个单独的components/index文件封装的情况下

// 全局过滤器的创建方法：
// Vue.filter('名称','函数体')
// 它是一个具名导出：所以要用花括号
// import { formatDate } from '@/filters/index'
// Vue.filter('formatTimeEntry', formatDate)

import * as filters from '@/filters'
// console.log(filters) // 就是module：这个数组
for (const key in filters) {
  // 这里明明写了let key in 一保存 就成了const？？为什么？
  // console.log(key)  //就是过滤器的名字
  const filterName = key
  const filterFunction = filters[key]
  Vue.filter(filterName, filterFunction)
}

// 注册全局的混入：
import { checkPermission } from '@/mixin'
// // 混入的方法只会执行一次，但是全局都会注册这个混入的方法
Vue.mixin(checkPermission)

Vue.config.productionTip = false
// 上面这行代码的意思 是阻止显示生产模式的消息。
// You are running Vue in development mode.
// Make sure to turn on production mode when deploying for production.
// 大概意思就是：
// 你运行的Vu是开发模式。为生产部署时，请确保启用生产模式。
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
